import React, { useEffect } from 'react'
import getCinemaListAction from '../redux/action/getCinemaListAction'
import { connect } from 'react-redux'


function Cinemas(props) {
  let { cityName, list, getCinemaListAction } = props
  useEffect(() => {
    if (list.length === 0) {
      getCinemaListAction()
    }
  }, [list, getCinemaListAction])
  return (
    <div>
      <div style={{ overflow: "hidden" }}>
        <div style={{ float: "left" }} onClick={
          () => {
            props.history.push('/city')
          }
        }>{cityName}</div>
        <div style={{ float: "right" }} onClick={
          () => {
            props.history.push('/cinemas/search')
          }
        }>搜索</div>
        {
          list.map(item =>
            <dl key={item.cinemaId} style={{ padding: "10px" }}>
              <dt>{item.name}</dt>
              <dd style={{ fontSize: "12px", color: "gray" }}>{item.address}</dd>
            </dl>
          )
        }
      </div>
    </div>
  )
}

const mapStateToProps = (state) => ({
  cityName: state.CityReducer.cityName,
  list: state.CinemaReducer.list
})

const mapDispatchToProps = {
  getCinemaListAction
}

export default connect(mapStateToProps, mapDispatchToProps)(Cinemas)